<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid布局详细教程</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .description {
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }

        .section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .section-title {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #3498db;
        }

        .grid-container {
            display: grid;
            gap: 10px;
            padding: 20px;
            background: #f8f9fa;
            border: 2px solid #3498db;
            border-radius: 8px;
            margin: 20px 0;
            min-height: 200px;
        }

        .grid-item {
            padding: 15px;
            background: #3498db;
            color: white;
            border-radius: 5px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item-1 {
            background: #e74c3c;
        }

        .item-2 {
            background: #2ecc71;
        }

        .item-3 {
            background: #f39c12;
        }

        .item-4 {
            background: #9b59b6;
        }

        .item-5 {
            background: #1abc9c;
        }

        .item-6 {
            background: #34495e;
        }

        .item-7 {
            background: #e67e22;
        }

        .item-8 {
            background: #16a085;
        }

        .item-9 {
            background: #8e44ad;
        }

        .code-block {
            background: #2d3436;
            color: #f5f6fa;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
            font-family: 'Consolas', monospace;
            line-height: 1.5;
        }

        .comment {
            color: #dfe6e9;
            opacity: 0.8;
        }

        .property {
            color: #81ecec;
        }

        .value {
            color: #fab1a0;
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .control-group {
            display: flex;
            flex-direction: column;
        }

        .control-group label {
            margin-bottom: 5px;
            font-weight: bold;
        }

        .control-group select,
        .control-group input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .visual-guide {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
            padding: 15px;
            background: #f1f2f6;
            border-radius: 8px;
        }

        .guide-item {
            text-align: center;
            padding: 10px;
        }

        .guide-icon {
            font-size: 24px;
            color: #3498db;
            margin-bottom: 10px;
        }

        .explanation {
            margin-top: 20px;
            padding: 20px;
            background: #e8f4fc;
            border-left: 4px solid #3498db;
            border-radius: 4px;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .highlight {
            background: #fff8e1;
            padding: 2px 5px;
            border-radius: 3px;
            font-weight: bold;
        }

        .grid-line {
            position: relative;
            border: 1px dashed #3498db;
            margin: 30px 0;
            padding: 15px;
        }

        .grid-line::before {
            content: "网格线";
            position: absolute;
            top: -12px;
            left: 15px;
            background: #3498db;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .area-label {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .controls {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>CSS Grid布局详细教程</h1>
            <p class="description">掌握CSS Grid布局，创建复杂的二维网页布局</p>
        </header>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-info-circle"></i>Grid布局基础</h2>
            <p>CSS Grid是一个二维布局系统，专门用于处理行和列的布局。它允许你同时控制两个维度，非常适合创建复杂的网页布局。</p>

            <div class="visual-guide">
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-border-all"></i></div>
                    <p>网格容器 (Grid Container)</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-th"></i></div>
                    <p>网格项目 (Grid Items)</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-grip-lines"></i></div>
                    <p>网格线 (Grid Lines)</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-border-style"></i></div>
                    <p>网格轨道 (Grid Tracks)</p>
                </div>
            </div>

            <div class="code-block">
                <span class="comment">/* 创建一个Grid容器 */</span><br>
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">grid</span>; <span
                    class="comment">/* 或 inline-grid */</span><br>
                }
            </div>

            <div class="explanation">
                <p>Grid布局由<strong>网格容器</strong>（父元素）和<strong>网格项目</strong>（子元素）组成。将元素的display属性设置为grid或inline-grid后，它的直接子元素就会自动成为网格项目。
                </p>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-sliders-h"></i>Grid容器属性</h2>
            <p>以下属性应用于Grid容器，控制所有网格项目的整体布局行为。</p>

            <h3>1. grid-template-columns 和 grid-template-rows - 定义列和行</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="gridColumns">grid-template-columns:</label>
                    <input type="text" id="gridColumns" value="1fr 1fr 1fr" placeholder="例如: 1fr 1fr 1fr">
                </div>
                <div class="control-group">
                    <label for="gridRows">grid-template-rows:</label>
                    <input type="text" id="gridRows" value="100px 100px" placeholder="例如: 100px 100px">
                </div>
            </div>

            <div class="grid-container" id="templateDemo"
                style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px;">
                <div class="grid-item item-1">1</div>
                <div class="grid-item item-2">2</div>
                <div class="grid-item item-3">3</div>
                <div class="grid-item item-4">4</div>
                <div class="grid-item item-5">5</div>
                <div class="grid-item item-6">6</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-columns</span>: <span class="value">1fr 1fr
                    1fr</span>; <span class="comment">/* 创建3列，每列等宽 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-rows</span>: <span class="value">100px
                    100px</span>; <span class="comment">/* 创建2行，每行100px高 */</span><br>
                }<br>
                <br>
                <span class="comment">/* 常用单位: px, %, fr, auto, min-content, max-content */</span>
            </div>

            <h3>2. grid-template-areas - 定义网格区域</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="gridAreas">grid-template-areas:</label>
                    <input type="text" id="gridAreas"
                        value="'header header header' 'sidebar content content' 'footer footer footer'"
                        placeholder="例如: 'header header header' 'sidebar content content'">
                </div>
            </div>

            <div class="grid-container" id="areasDemo" style="
                grid-template-areas: 
                    'header header header'
                    'sidebar content content'
                    'footer footer footer';
                grid-template-rows: 80px 1fr 80px;
                grid-template-columns: 1fr 2fr;">
                <div class="grid-item item-1" style="grid-area: header;">Header</div>
                <div class="grid-item item-2" style="grid-area: sidebar;">Sidebar</div>
                <div class="grid-item item-3" style="grid-area: content;">Content</div>
                <div class="grid-item item-4" style="grid-area: footer;">Footer</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-areas</span>: <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="value">"header header header"</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="value">"sidebar content content"</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="value">"footer footer footer"</span>;<br>
                }<br>
                <br>
                <span class="property">.header</span> { <span class="property">grid-area</span>: <span
                    class="value">header</span>; }<br>
                <span class="property">.sidebar</span> { <span class="property">grid-area</span>: <span
                    class="value">sidebar</span>; }<br>
                <span class="property">.content</span> { <span class="property">grid-area</span>: <span
                    class="value">content</span>; }<br>
                <span class="property">.footer</span> { <span class="property">grid-area</span>: <span
                    class="value">footer</span>; }
            </div>

            <h3>3. gap - 网格间隙</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="gridGap">gap:</label>
                    <input type="text" id="gridGap" value="10px" placeholder="例如: 10px">
                </div>
                <div class="control-group">
                    <label for="columnGap">column-gap:</label>
                    <input type="text" id="columnGap" value="10px" placeholder="例如: 10px">
                </div>
                <div class="control-group">
                    <label for="rowGap">row-gap:</label>
                    <input type="text" id="rowGap" value="10px" placeholder="例如: 10px">
                </div>
            </div>

            <div class="grid-container" id="gapDemo"
                style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 10px;">
                <div class="grid-item item-1">1</div>
                <div class="grid-item item-2">2</div>
                <div class="grid-item item-3">3</div>
                <div class="grid-item item-4">4</div>
                <div class="grid-item item-5">5</div>
                <div class="grid-item item-6">6</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">gap</span>: <span class="value">10px</span>; <span
                    class="comment">/* 同时设置行和列间隙 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 或者分别设置 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">column-gap</span>: <span class="value">10px</span>;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">row-gap</span>: <span class="value">15px</span>;<br>
                }
            </div>

            <h3>4. justify-items 和 align-items - 项目对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="justifyItems">justify-items:</label>
                    <select id="justifyItems">
                        <option value="stretch">stretch (默认)</option>
                        <option value="start">start</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="alignItems">align-items:</label>
                    <select id="alignItems">
                        <option value="stretch">stretch (默认)</option>
                        <option value="start">start</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                    </select>
                </div>
            </div>

            <div class="grid-container" id="itemsDemo"
                style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; justify-items: stretch; align-items: stretch;">
                <div class="grid-item item-1" style="height: 60px; width: 80px;">1</div>
                <div class="grid-item item-2" style="height: 80px; width: 120px;">2</div>
                <div class="grid-item item-3" style="height: 40px; width: 60px;">3</div>
                <div class="grid-item item-4" style="height: 70px; width: 90px;">4</div>
                <div class="grid-item item-5" style="height: 50px; width: 70px;">5</div>
                <div class="grid-item item-6" style="height: 90px; width: 100px;">6</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">justify-items</span>: <span class="value">center</span>;
                <span class="comment">/* 水平方向对齐 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-items</span>: <span class="value">center</span>;
                <span class="comment">/* 垂直方向对齐 */</span><br>
                }<br>
                <br>
                <span class="comment">/* 简写形式 */</span><br>
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">place-items</span>: <span class="value">center</span>;
                <span class="comment">/* 同时设置 justify-items 和 align-items */</span><br>
                }
            </div>

            <h3>5. justify-content 和 align-content - 内容对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="justifyContent">justify-content:</label>
                    <select id="justifyContent">
                        <option value="start">start (默认)</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                        <option value="stretch">stretch</option>
                        <option value="space-around">space-around</option>
                        <option value="space-between">space-between</option>
                        <option value="space-evenly">space-evenly</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="alignContent">align-content:</label>
                    <select id="alignContent">
                        <option value="start">start (默认)</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                        <option value="stretch">stretch</option>
                        <option value="space-around">space-around</option>
                        <option value="space-between">space-between</option>
                        <option value="space-evenly">space-evenly</option>
                    </select>
                </div>
            </div>

            <div class="grid-container" id="contentDemo"
                style="grid-template-columns: 100px 100px; grid-template-rows: 80px 80px; height: 300px; justify-content: start; align-content: start;">
                <div class="grid-item item-1">1</div>
                <div class="grid-item item-2">2</div>
                <div class="grid-item item-3">3</div>
                <div class="grid-item item-4">4</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">justify-content</span>: <span
                    class="value">center</span>; <span class="comment">/* 整个网格水平对齐 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-content</span>: <span class="value">center</span>;
                <span class="comment">/* 整个网格垂直对齐 */</span><br>
                }<br>
                <br>
                <span class="comment">/* 简写形式 */</span><br>
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">place-content</span>: <span class="value">center</span>;
                <span class="comment">/* 同时设置 justify-content 和 align-content */</span><br>
                }
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-cube"></i>Grid项目属性</h2>
            <p>以下属性应用于Grid项目，控制单个项目在网格中的位置和大小。</p>

            <h3>1. grid-column 和 grid-row - 项目位置</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="gridColumn">项目1 grid-column:</label>
                    <input type="text" id="gridColumn" value="1 / 3" placeholder="例如: 1 / 3">
                </div>
                <div class="control-group">
                    <label for="gridRow">项目1 grid-row:</label>
                    <input type="text" id="gridRow" value="1 / 3" placeholder="例如: 1 / 3">
                </div>
            </div>

            <div class="grid-container" id="positionDemo"
                style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px;">
                <div class="grid-item item-1" style="grid-column: 1 / 3; grid-row: 1 / 3;">1 (grid-column: 1 / 3;
                    grid-row: 1 / 3;)</div>
                <div class="grid-item item-2">2</div>
                <div class="grid-item item-3">3</div>
                <div class="grid-item item-4">4</div>
                <div class="grid-item item-5">5</div>
                <div class="grid-item item-6">6</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-column</span>: <span class="value">1 / 3</span>;
                <span class="comment">/* 从第1条网格线到第3条网格线 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-row</span>: <span class="value">2 / 4</span>; <span
                    class="comment">/* 从第2条网格线到第4条网格线 */</span><br>
                }<br>
                <br>
                <span class="comment">/* 简写形式 */</span><br>
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-area</span>: <span class="value">2 / 1 / 4 /
                    3</span>; <span class="comment">/* grid-row-start / grid-column-start / grid-row-end /
                    grid-column-end */</span><br>
                }
            </div>

            <h3>2. justify-self 和 align-self - 单独对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="justifySelf">项目2 justify-self:</label>
                    <select id="justifySelf">
                        <option value="stretch">stretch (默认)</option>
                        <option value="start">start</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="alignSelf">项目2 align-self:</label>
                    <select id="alignSelf">
                        <option value="stretch">stretch (默认)</option>
                        <option value="start">start</option>
                        <option value="end">end</option>
                        <option value="center">center</option>
                    </select>
                </div>
            </div>

            <div class="grid-container" id="selfDemo"
                style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px;">
                <div class="grid-item item-1">1</div>
                <div class="grid-item item-2" style="justify-self: stretch; align-self: stretch;">2</div>
                <div class="grid-item item-3">3</div>
                <div class="grid-item item-4">4</div>
                <div class="grid-item item-5">5</div>
                <div class="grid-item item-6">6</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">justify-self</span>: <span class="value">center</span>;
                <span class="comment">/* 水平方向单独对齐 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-self</span>: <span class="value">end</span>; <span
                    class="comment">/* 垂直方向单独对齐 */</span><br>
                }<br>
                <br>
                <span class="comment">/* 简写形式 */</span><br>
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">place-self</span>: <span class="value">center end</span>;
                <span class="comment">/* 同时设置 justify-self 和 align-self */</span><br>
                }
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-lightbulb"></i>Grid布局实用技巧</h2>

            <div class="explanation">
                <p><span class="highlight">1. 响应式网格</span> - 使用repeat()、minmax()和auto-fit创建响应式布局：</p>
                <div class="code-block">
                    <span class="property">.container</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">grid</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-columns</span>: <span
                        class="value">repeat(auto-fit, minmax(250px, 1fr))</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">gap</span>: <span class="value">20px</span>;<br>
                    }
                </div>

                <p><span class="highlight">2. 网格线命名</span> - 使用命名网格线提高代码可读性：</p>
                <div class="code-block">
                    <span class="property">.container</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">grid</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-columns</span>: <span
                        class="value">[main-start] 1fr [content-start] 2fr [content-end] 1fr [main-end]</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-rows</span>: <span
                        class="value">[header-start] 80px [header-end content-start] auto [content-end footer-start]
                        80px [footer-end]</span>;<br>
                    }<br>
                    <br>
                    <span class="property">.header</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-column</span>: <span class="value">main-start /
                        main-end</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-row</span>: <span class="value">header-start /
                        header-end</span>;<br>
                    }
                </div>

                <p><span class="highlight">3. 隐式网格与显式网格</span> - 使用grid-auto-rows和grid-auto-columns控制隐式网格：</p>
                <div class="code-block">
                    <span class="property">.container</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">grid</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-columns</span>: <span class="value">1fr
                        1fr 1fr</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-template-rows</span>: <span class="value">100px
                        100px</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-auto-rows</span>: <span
                        class="value">150px</span>; <span class="comment">/* 隐式行的高度 */</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-auto-columns</span>: <span
                        class="value">1fr</span>; <span class="comment">/* 隐式列的宽度 */</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">grid-auto-flow</span>: <span
                        class="value">row</span>; <span class="comment">/* 自动放置方向: row, column, dense */</span><br>
                    }
                </div>
            </div>
        </div>

        <div class="footer">
            <p>CSS Grid布局详细教程 &copy; 2023 | 使用CSS Grid创建现代化二维布局</p>
        </div>
    </div>

    <script>
        // 交互功能实现
        document.getElementById('gridColumns').addEventListener('input', function () {
            document.getElementById('templateDemo').style.gridTemplateColumns = this.value;
        });

        document.getElementById('gridRows').addEventListener('input', function () {
            document.getElementById('templateDemo').style.gridTemplateRows = this.value;
        });

        document.getElementById('gridAreas').addEventListener('input', function () {
            document.getElementById('areasDemo').style.gridTemplateAreas = this.value;
        });

        document.getElementById('gridGap').addEventListener('input', function () {
            document.getElementById('gapDemo').style.gap = this.value;
        });

        document.getElementById('columnGap').addEventListener('input', function () {
            document.getElementById('gapDemo').style.columnGap = this.value;
        });

        document.getElementById('rowGap').addEventListener('input', function () {
            document.getElementById('gapDemo').style.rowGap = this.value;
        });

        document.getElementById('justifyItems').addEventListener('change', function () {
            document.getElementById('itemsDemo').style.justifyItems = this.value;
        });

        document.getElementById('alignItems').addEventListener('change', function () {
            document.getElementById('itemsDemo').style.alignItems = this.value;
        });

        document.getElementById('justifyContent').addEventListener('change', function () {
            document.getElementById('contentDemo').style.justifyContent = this.value;
        });

        document.getElementById('alignContent').addEventListener('change', function () {
            document.getElementById('contentDemo').style.alignContent = this.value;
        });

        document.getElementById('gridColumn').addEventListener('input', function () {
            document.querySelector('#positionDemo .item-1').style.gridColumn = this.value;
            document.querySelector('#positionDemo .item-1').textContent = `1 (grid-column: ${this.value}; grid-row: ${document.getElementById('gridRow').value})`;
        });

        document.getElementById('gridRow').addEventListener('input', function () {
            document.querySelector('#positionDemo .item-1').style.gridRow = this.value;
            document.querySelector('#positionDemo .item-1').textContent = `1 (grid-column: ${document.getElementById('gridColumn').value}; grid-row: ${this.value})`;
        });

        document.getElementById('justifySelf').addEventListener('change', function () {
            document.querySelector('#selfDemo .item-2').style.justifySelf = this.value;
        });

        document.getElementById('alignSelf').addEventListener('change', function () {
            document.querySelector('#selfDemo .item-2').style.alignSelf = this.value;
        });
    </script>
</body>

</html>